<template>
    <div class="page-container">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <h3>交易分析报表</h3>
            <div>
              <el-button type="primary" icon="Download">导出数据</el-button>
            </div>
          </div>
        </template>
  
        <div class="filter-section">
          <el-form :inline="true">
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item label="交易类型">
              <el-select v-model="transactionType" placeholder="全部类型">
                <el-option label="全部" value="" />
                <el-option label="线上支付" value="online" />
                <el-option label="银行转账" value="bank" />
                <el-option label="扫码支付" value="qrcode" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadData">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
  
        <div class="chart-container">
          <div ref="transactionChart" style="height: 400px;"></div>
        </div>
  
        <el-divider />
  
        <el-table :data="transactionData" style="width: 100%" class="report-table">
          <el-table-column prop="type" label="交易类型" />
          <el-table-column prop="count" label="交易笔数" align="center" />
          <el-table-column prop="amount" label="交易金额" align="right">
            <template #default="{ row }">
              ¥{{ formatCurrency(row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="successRate" label="成功率" align="center">
            <template #default="{ row }">
              <el-progress :percentage="row.successRate" :color="row.successRate > 90 ? '#67C23A' : row.successRate > 80 ? '#E6A23C' : '#F56C6C'" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import * as echarts from 'echarts'
  import { formatCurrency } from '../util/util'
  
  const dateRange = ref([])
  const transactionType = ref('')
  const transactionChart = ref<HTMLElement | null>(null)
  let chartInstance: echarts.ECharts | null = null
  
  const transactionData = ref([
    { type: '线上支付', count: 1250, amount: 4658745, successRate: 98.5 },
    { type: '银行转账', count: 780, amount: 3120000, successRate: 95.2 },
    { type: '扫码支付', count: 450, amount: 1256000, successRate: 92.3 },
    { type: 'API支付', count: 320, amount: 985000, successRate: 99.1 },
    { type: '其他', count: 150, amount: 385000, successRate: 88.7 }
  ])
  
  const loadData = () => {
    console.log('加载交易数据', dateRange.value, transactionType.value)
  }
  
  const initChart = () => {
    if (transactionChart.value) {
      chartInstance = echarts.init(transactionChart.value)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['交易笔数', '交易金额']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: transactionData.value.map(item => item.type),
            axisLine: {
              lineStyle: {
                color: '#dcdfe6'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '交易笔数',
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#dcdfe6'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#f5f7fa'
              }
            }
          },
          {
            type: 'value',
            name: '交易金额',
            position: 'right',
            axisLabel: {
              formatter: '¥{value}'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#dcdfe6'
              }
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '交易笔数',
            type: 'bar',
            data: transactionData.value.map(item => item.count),
            itemStyle: {
              color: '#409EFF'
            }
          },
          {
            name: '交易金额',
            type: 'line',
            yAxisIndex: 1,
            data: transactionData.value.map(item => item.amount),
            itemStyle: {
              color: '#67C23A'
            },
            lineStyle: {
              width: 3
            }
          }
        ]
      }
      chartInstance.setOption(option)
    }
  }
  
  onMounted(() => {
    setTimeout(() => {
      initChart()
    }, 100)
    
    window.addEventListener('resize', () => {
      if (chartInstance) {
        chartInstance.resize()
      }
    })
  })
  
  onUnmounted(() => {
    if (chartInstance) {
      chartInstance.dispose()
    }
    window.removeEventListener('resize', () => {})
  })
  </script>
  
  <style lang="scss" scoped>
  .page-container {
    padding: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .filter-section {
      margin-bottom: 20px;
    }
    
    .chart-container {
      margin-bottom: 30px;
    }
    
    .report-table {
      margin-top: 20px;
    }
    
    :deep(.el-progress) {
      width: 100%;
    }
  }
  </style>